<template>
  <div class="hello">
    <!-- <div class="home-bg" v-if="homeBgShow" @click.stop="closeHomeBg"></div> -->
    <img src="https://batang-1252933127.cos.ap-chengdu.myqcloud.com/home-BG.png" class="home-bg" v-if="homeBgShow" @click.stop="closeHomeBg" />
    <div>
      <div v-show="!homeBgShow && !showDetail">
        <one v-show="active == 0" @callback="callback" ref="one"></one>
        <two v-show="active == 1" @callback="callback" ref="two"></two>
        <three v-if="false" @callback="callback" ref="three"></three>
      </div>
      <detail :detail="detail" v-show="!(!homeBgShow && !showDetail)" @callback="callback"></detail>
    </div>
    <div data-v-469af010="" role="tablist" class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom" v-show="!showDetail">
      <div @click="active=0;closeHomeBg('one')" data-v-469af010="" role="tab" class="van-tabbar-item" tabindex="0" aria-selected="true">
        <!-- <div class="van-tabbar-item__text">巴塘介绍</div> -->
        <img class="tabbarImg" src="./img/tab1-icon.jpg" />
      </div>
      <div v-if="true" @click="active=1;closeHomeBg('two')" data-v-469af010="" role="tab" class="van-tabbar-item" tabindex="0" aria-selected="false">
        <!-- <div class="van-tabbar-item__text">会议指南</div> -->
        <img class="tabbarImg" src="./img/tab2-icon.jpg" />
      </div>
      <!-- <div @click="active=2;closeHomeBg('three')" data-v-469af010="" role="tab" class="van-tabbar-item" tabindex="0" aria-selected="false" v-if="false"> -->
        <!-- <div class="van-tabbar-item__text">巴塘美食</div> -->
        <!-- <img class="tabbarImg" src="./img/tab3-icon.jpg" /> -->
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import one from './one.vue'
import two from './two.vue'
import three from './three.vue'
import detail from './detail.vue'
export default {
  name: 'HelloWorld',
  components: {
    one,
    two,
    three,
    detail
  },
  props: {
    msg: String
  },
  data() {
    return {
      active: 0,
      homeBgShow: true,
      detail: {},
      showDetail: false
    }
  },
  methods: {
    closeHomeBg() {
      this.homeBgShow = false;
      this.showDetail = false;
      // this.$refs.two.close();
      window.scrollTo({top: 0, left: 0});
    },
    callback(data, type) {
      if (data) {
        this.showDetail = true;
        this.detail = data;
        this.detail.type = type;
      } else {
        this.showDetail = false;
      }
      window.scrollTo({top: 0, left: 0});
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home-bg {
    height: calc(100vh - 50px); 
    width: 100%;
    /* background: url('./img/home-BG.png') no-repeat 0 0; */
    /* background-size: 100% calc(100vh - 50px); */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .van-tabbar{
    height: 80px;
  }
  .van-tabbar-item{
    width: 33.3333%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tabbarImg{
    width: 48px;
    height: 60px;
  }
</style>
